<template>
    <div>
        <div>
            <el-form ref="searchForm" :inline="true" :model="condition.search" label-suffix="" label-width="100px"
                     :size="size"
                     label-position="left">
                <el-row>
                    <el-col :span=6>
                        <el-form-item label="门店" prop="shopId" v-if="!shopId">
                            <el-select v-model="condition.search.shopId" placeholder="请选择门店" style="width:200px;">
                                <el-option
                                    v-for="item in shops"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                    {{ item.name }}
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="模版类型" prop="type">
                            <el-select v-model="condition.search.type"
                                       placeholder="模版类型">
                                <el-option label="链接"
                                           value="H5"></el-option>
                                <el-option label="小程序"
                                           value="MNP"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item>
                            <el-button type="primary" @click="getData">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="showAddDialog">新增</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="reset">重置</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="exportExcel">导出</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <el-table
            id="mainTable"
            :data="tableData"
            :size="size"
            header-cell-class-name="tableHeaderStyle"
            :row-class-name="tableRowClassName">
            <el-table-column label="序号" width="60">
                <template v-slot="scope">
                    <span>{{ (condition.page - 1) * condition.rows + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="type"
                :formatter="formatType"
                label="模版类型">
            </el-table-column>
            <el-table-column
                prop="appName"
                label="小程序名称">
            </el-table-column>
            <el-table-column
                prop="title"
                label="模版名称">
            </el-table-column>
            <el-table-column
                prop="path"
                label="模版路径">
            </el-table-column>
            <el-table-column
                prop="showType"
                :formatter="formatShowType"
                label="显示内容">
            </el-table-column>
            <el-table-column
                prop="shareBehavior"
                :formatter="formatBehavior"
                label="分享行为">
            </el-table-column>
            <el-table-column
                prop="titleFormat"
                label="标题格式">
                <template v-slot="scope">
                    <table-popover :text=scope.row.titleFormat :length="16"
                                   v-if="scope.row.titleFormat"></table-popover>
                </template>
            </el-table-column>
            <el-table-column
                prop="alias"
                label="别名">
            </el-table-column>
            <el-table-column
                prop="backgroundPicUrl"
                width="120px"
                label="背景图片">
                <template v-slot="scope">
                    <el-image style="width: 80px; height: 80px"
                              :src="scope.row.imgUrl"
                              fit="contain">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column
                prop="richText"
                label="富文本">
                <template v-slot="scope">
                    <table-popover :text=scope.row.richText :length="16" placeholder="点击查看"
                                   v-if="scope.row.richText"></table-popover>
                </template>
            </el-table-column>
            <el-table-column
                prop="welcomeMsg"
                label="欢迎语">
                <template v-slot="scope">
                    <table-popover :text=scope.row.welcomeMsg :length="16" v-if="scope.row.welcomeMsg"></table-popover>
                </template>
            </el-table-column>
            <el-table-column
                prop="noticeText"
                label="顶部通知">
                <template v-slot="scope">
                    <table-popover :text=scope.row.noticeText :length="16" v-if="scope.row.noticeText"></table-popover>
                </template>
            </el-table-column>
            <el-table-column
                prop="noticeKey"
                label="通知KEY">
            </el-table-column>
            <el-table-column
                prop="updateTime"
                label="更新时间">
            </el-table-column>
            <el-table-column
                label="操作"
                fixed="right"
                align="center"
                width="80px">
                <template v-slot="scope">
                    <div>
                        <el-button @click="showUpdateDialog(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="onDelete(scope.row)" type="text" size="small">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            small
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="condition.page"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size.sync="condition.rows"
            layout="sizes, prev, pager, next"
            :total.sync="condition.total">
        </el-pagination>
        <el-drawer ref="drawer" direction="rtl" :title=addOrUpdateDialogTitle width="30%"
                   :visible.sync="addOrUpdateDialogVisible">
            <el-form :model="addOrUpdateForm" label-width="120px" :size="size">
                <el-form-item label="选择门店" v-if="!shopId">
                    <el-select v-model="addOrUpdateForm.shopId" placeholder="请选择门店" style="width:200px;">
                        <el-option
                            v-for="item in shops"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            {{ item.name }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="模版类型">
                    <el-select v-model="addOrUpdateForm.type"
                               placeholder="模版类型">
                        <el-option label="链接"
                                   value="H5"></el-option>
                        <el-option label="小程序"
                                   value="MNP"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择小程序">
                    <el-select v-model="addOrUpdateForm.mpId" placeholder="选择小程序" style="width:200px;">
                        <el-option
                            v-for="item in miniPrograms"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            {{ item.name }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="模版名称">
                    <el-input v-model="addOrUpdateForm.title"
                              placeholder="模版名称"></el-input>
                </el-form-item>
                <el-form-item label="模版路径">
                    <el-input v-model="addOrUpdateForm.path"
                              placeholder="模版路径"></el-input>
                    <div class="form-tips">当选择小程序的时候，路径请以.html结尾</div>
                    <div class="form-tips" style="margin-top: 5px">/pages/reserve/notice/index.html</div>
                    <div class="form-tips" style="margin-top: 5px">/pages/reserve/notice2/index.html</div>
                </el-form-item>
                <el-form-item label="显示内容">
                    <el-select v-model="addOrUpdateForm.showType"
                               placeholder="显示内容">
                        <el-option label="相册" value="ALBUM"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分享行为">
                    <el-select v-model="addOrUpdateForm.shareBehavior" clearable placeholder="分享行为">
                        <el-option label="系统默认" value="DEFAULT"></el-option>
                        <el-option label="分享标题" value="TITLE"></el-option>
                        <el-option label="分享标题和图片" value="TITLE_AND_IMAGE"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="标题格式">
                    <el-input v-model="addOrUpdateForm.titleFormat" type="textarea" autosize
                              placeholder="标题格式"></el-input>
                    <div class="form-tips">标题格式可以插入占位符，暂时只支持nickname代表客户昵称</div>
                </el-form-item>
                <el-form-item label="配置富文本内容">
                    <el-button @click="reserveDialogVisible = true" :size="size" v-if="!addOrUpdateForm.richText">
                        点击配置
                    </el-button>
                    <el-button @click="reserveDialogVisible = true" :size="size" v-else>已配置</el-button>
                </el-form-item>
                <el-form-item label="唯一别名">
                    <el-input v-model="addOrUpdateForm.alias" placeholder="唯一别名"></el-input>
                    <div class="form-tips">用于配置公众号需要，最好是字母加数字</div>
                </el-form-item>
                <el-form-item label="欢迎语">
                    <el-input v-model="addOrUpdateForm.welcomeMsg" placeholder="欢迎语" type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="顶部通知">
                    <el-input v-model="addOrUpdateForm.noticeText" placeholder="顶部通知" type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="通知KEY">
                    <el-input v-model="addOrUpdateForm.noticeKey" placeholder="通知KEY"></el-input>
                </el-form-item>
                <el-form-item label="是否开启提醒">
                    <el-switch v-model="addOrUpdateForm.remindFlag"></el-switch>
                </el-form-item>
                <el-form-item label="提醒时间" v-if="addOrUpdateForm.remindFlag">
                    <el-select v-model="addOrUpdateForm.remindTime" clearable placeholder="提醒时间">
                        <el-option label="上午9点" :value=9></el-option>
                        <el-option label="上午10点" :value=10></el-option>
                        <el-option label="上午11点" :value=11></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否为默认模版">
                    <el-switch v-model="addOrUpdateForm.isDefault"></el-switch>
                </el-form-item>
                <el-form-item label="底部菜单栏配置">
                    <el-input v-model="addOrUpdateForm.menuBar" type="textarea" :autosize="{minRows: 3}"
                              placeholder="底部菜单栏配置"></el-input>
                    <div class="form-tips">
                        必须是JSON数组格式配置，相应的KEY值需要先在配置中心->菜单配置完成，最多配置3个
                    </div>
                </el-form-item>
                <el-form-item label="背景图片">
                    <el-button @click="selectAlbumDialogVisible = true" size="small" type="success">
                        选择图片
                    </el-button>
                    <div v-if="selectedAlbum.id" style="margin-top: 10px; margin-bottom: -10px">
                        <media-show :url="selectedAlbum.url"></media-show>
                    </div>
                </el-form-item>
            </el-form>
            <div class="drawer-footer">
                <el-button class="drawer-footer-button" @click="addOrUpdateDialogVisible = false" :size="size">取 消
                </el-button>
                <el-button class="drawer-footer-button" @click="addOrUpdateConfirm" type="primary" :size="size">确 定
                </el-button>
            </div>
        </el-drawer>

        <el-dialog title="编辑预定富文本" width="50%" :visible.sync="reserveDialogVisible" append-to-body>
            <rich-editor ref="richEditor"></rich-editor>
            <div slot="footer" class="dialog-footer">
                <el-button @click="reserveDialogVisible = false" :size="size">取 消</el-button>
                <el-button @click="reserveConfigConfirm" type="primary" :size="size">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="选择图片" width="70%" :visible.sync="selectAlbumDialogVisible" append-to-body>
            <album ref="albumSelect" size="small" @select="onSelectAlbum" mode="select"></album>
            <div slot="footer" class="dialog-footer"></div>
        </el-dialog>
    </div>
</template>

<script>
import {
    addReserveNoticeTemplate,
    deleteReserveNoticeTemplate,
    getMpInfoByPage,
    getReserveNoticeTemplateByPage,
    getShopByPage,
    updateReserveNoticeTemplate
} from '@/api/api'
import RichEditor from "@/component/single/RichEditor";
import TablePopover from "@/component/single/TablePopover";
import Album from "@/component/Album";
import MediaShow from "@/component/single/MediaShow";

export default {
    name: "ReserveNoticeTemplate",
    components: {TablePopover, RichEditor, Album, MediaShow},
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 10,
                total: 0,
                search: {}
            },
            // 表格数据
            tableData: [],
            // 新增或者编辑对话框显示
            addOrUpdateDialogVisible: false,
            // 标题
            addOrUpdateDialogTitle: '新增',
            // 新增或者编辑对话框表单
            addOrUpdateForm: {},
            // 选中行
            selectedRow: {},
            // 门店数据
            shops: [],
            // 小程序列表
            miniPrograms: [],

            // 预定富文本对话框
            reserveDialogVisible: false,
            // 选择相册对话框
            selectAlbumDialogVisible: false,
            selectedAlbum: [],

            // 底部菜单栏
            menuBar: "[{\n" +
                "\t\"name\": \"订阅提醒\",\n" +
                "\t\"key\": \"subscribe\"\n" +
                "}, {\n" +
                "\t\"name\": \"会员中心\",\n" +
                "\t\"key\": \"member-center\"\n" +
                "}, {\n" +
                "\t\"name\": \"所有门店\",\n" +
                "\t\"key\": \"shop-list\"\n" +
                "}]"
        }
    },
    // 这里定义需要父组件传过来的东西
    props: {
        size: {
            type: String,
            default: 'small'
        },
        shopId: String,
    },
    methods: {
        reserveConfigConfirm: function () {
            let html = this.$refs.richEditor.getHtml();
            this.addOrUpdateForm.richText = html;
            this.reserveDialogVisible = false;
        },
        onSelectAlbum(row) {
            this.selectedAlbum = row;
            this.selectAlbumDialogVisible = false;
            this.addOrUpdateForm.imgUrl = row.url;
            this.addOrUpdateForm.size = row.size;
        },
        // 这里可以单独设置每一行的样式
        tableRowClassName({row, rowIndex}) {
            return '';
        },
        handleSizeChange(val) {
            this.getData();
        },
        handleCurrentChange(val) {
            this.getData();
        },
        // 格式布尔值
        formatBoolean: function (row, column, cellValue) {
            if (cellValue) {
                return "是";
            } else {
                return "否";
            }
        },
        formatType: function (row, column, cellValue) {
            if (cellValue == 'H5') {
                return "链接";
            } else if (cellValue == 'MNP') {
                return "小程序";
            } else {
                return "未知";
            }
        },
        formatShowType: function (row, column, cellValue) {
            if (cellValue == 'ALBUM') {
                return "相册";
            } else if (cellValue == 'RICH_TEXT') {
                return "富文本";
            } else {
                return "未知";
            }
        },
        formatBehavior: function (row, column, cellValue) {
            if (!cellValue) {
                return '';
            }
            if (cellValue == 'DEFAULT') {
                return "系统默认";
            } else if (cellValue == 'TITLE') {
                return "分享标题";
            } else if (cellValue == 'TITLE_AND_IMAGE') {
                return "分享标题和图片";
            } else {
                return "未知";
            }
        },
        showAddDialog: function () {
            this.addOrUpdateDialogTitle = '新增';
            this.addOrUpdateDialogVisible = true;
            this.addOrUpdateForm = {};
            if (this.shopId) {
                this.addOrUpdateForm.shopId = this.shopId;
            }
            this.$set(this.addOrUpdateForm, "type", 'MNP')
            this.$set(this.addOrUpdateForm, "showType", 'ALBUM')
            this.$set(this.addOrUpdateForm, "shareBehavior", 'TITLE_AND_IMAGE')
            this.$set(this.addOrUpdateForm, "titleFormat", '尊敬的nickname，您已预定成功，点击小程序查看您的预定信息')
            this.$set(this.addOrUpdateForm, "remindFlag", true)
            this.$set(this.addOrUpdateForm, "isDefault", false)
            this.$set(this.addOrUpdateForm, "menuBar", this.menuBar)
            this.$set(this.addOrUpdateForm, "welcomeMsg", '感谢您选择我们，我们全体员工期待您的光临，祝您生活愉快，工作顺利～')
        },
        showUpdateDialog: function (row) {
            this.addOrUpdateDialogTitle = '编辑';
            this.addOrUpdateDialogVisible = true;
            this.selectedRow = row;
            // 深拷贝
            this.addOrUpdateForm = Object.assign({}, row);
            if (!this.addOrUpdateForm.menuBar) {
                this.$set(this.addOrUpdateForm, "menuBar", this.menuBar)
            }
        },
        reset: function () {
            this.$refs['searchForm'].resetFields();
        },
        exportExcel: function () {
            this.GLOBAL.exportExcel('#mainTable', '数据.xlsx');
        },
        add: function () {
            addReserveNoticeTemplate(this.addOrUpdateForm).then(data => {
                if (data.respCode == 1000) {
                    this.addOrUpdateDialogVisible = false;
                    this.getData();
                    this.$message({
                        type: 'success',
                        message: '新增成功!'
                    });
                }
            });
        },
        update: function () {
            updateReserveNoticeTemplate(this.addOrUpdateForm).then(data => {
                if (data.respCode == 1000) {
                    this.addOrUpdateDialogVisible = false;
                    this.getData();
                    this.$message({
                        type: 'success',
                        message: '更新成功!'
                    });
                }
            });
        },
        onDelete: function (row) {
            this.$confirm('请确认是否删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteReserveNoticeTemplate({id: row.id}).then(data => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getData();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        addOrUpdateConfirm: function () {
            if (this.addOrUpdateDialogTitle == '新增') {
                this.add();
            } else if (this.addOrUpdateDialogTitle == '编辑') {
                this.update();
            }
        },
        // 获取门店列表
        getShops: function () {
            let condition = {
                page: 1,
                rows: 100,
                search: {}
            };
            getShopByPage(condition).then(data => {
                this.shops = data.body.rows;
            });
        },
        getMiniPrograms: function () {
            let ss = {
                page: 1,
                rows: 100,
                total: 0,
                search: {
                    accountType: 'MINI_PROGRAM'
                }
            };
            getMpInfoByPage(ss).then(data => {
                this.miniPrograms = data.body.rows;
            });
        },
        // 获取表格数据
        getData: function () {
            if (this.shopId) {
                this.condition.search.shopId = this.shopId;
            }
            getReserveNoticeTemplateByPage(this.condition).then(data => {
                this.tableData = data.body.rows;
                this.condition.total = data.body.total;
            });
            this.getShops();
            this.getMiniPrograms();
        },
    },
    created() {
        this.getData();
    },
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
